<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <u-status-bar></u-status-bar>
      <view class="nav-content">
        <view class="nav-left">
          <up-icon
            @click="goBack"
            name="arrow-left"
            size="24"
            class="nav-icon" />
          <up-icon @click="goHome" name="home" size="24" class="nav-icon" />
        </view>
        <text class="nav-title">{{ title }}</text>
      </view>
    </view>
    <view class="content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
const { title } = defineProps({
  title: {
    type: String,
    default: "",
  },
});
const goBack = () => {
  uni.navigateBack();
};

const goHome = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.nav-bar {
  position: sticky;
  top: 0;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #f0f0f0;
  z-index: 100;

  .nav-content {
    width: 100%;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
  }
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.nav-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  transform: translateX(100%);
  font-size: 34rpx;
  font-weight: 600;
  color: #333333;
}

.content {
  width: 100%;
  flex: 1;
}
</style>
